<template>
  <div class="Details_Box">
    <Swipe :autoplay="3000">
      <!-- v-for="(image, index) in images" :key="index" -->
      <SwipeItem v-for="(image, index) in images" :key="index">
        <img :src="image.img" />
      </SwipeItem>
    </Swipe>

    <div class="DetailsContent">
      <div class="DetailsTitle">
        <span class="DetailsTitleName">商品：</span>
        <span class="DetailsTitleText">{{title}}</span>
        <Tag class="success" type="success">特惠</Tag>
        <div class="price_box">
          <div class="name">价格:</div>
          <div class="price">{{price}}</div>
        </div>
      </div>
      <!-- 地址 -->
      <div class="address_box">
        <div class="address" is-link @click="showPopup">
          <div class="Title">邮箱地址</div>   <van-icon class="address_Icon" name="arrow" />
        </div>
            <!-- 优惠券单元格 -->
      <CouponCell
        class="CouponList opacity_06"
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :value="DiscountMoney?DiscountMoney:'0'+'￥'"
        @click="showList = true"
      />
           <GoodsAction class="GoodsAction">
          <GoodsActionIcon icon="chat-o" info="0" text="客服" @click="CustomerService" />
          <GoodsActionIcon
            icon="cart-o"
            :info="this.$store.state.cart"
            text="购物车"
            @click="ShoppingCart"
          />
          <GoodsActionButton type="warning" text="加入购物车" @click="AddShoppingCart()" />
          <GoodsActionButton type="danger" text="立即购买" @click="BuyNow()" />
        </GoodsAction>
      </div>
  
   
      <!-- 优惠券列表 -->
      <Popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <CouponList
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </Popup>

      <Popup v-model="show" round position="bottom" :style="{ height: '70%' }">
        <AddressEdit
          :area-list="areaList"
          show-postal
          show-delete
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选省', '请选市', '请选区']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
        />
      </Popup>
    </div>
    <Sku
      v-model="showSku"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
      :show-add-cart-btn="btn"
      @buy-clicked="onBuyClicked"
    />
  </div>
</template>
<script>
import {
  Swipe,
  SwipeItem,
  Tag,
  CouponCell,
  CouponList,
  Popup,
  AddressEdit,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Sku
} from "vant";
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "0",
  unitDesc: "元"
};
export default {
  data() {
    const areaList = {
      province_list: {
        110000: "北京市",
        120000: "湖北省"
      },
      city_list: {
        110100: "北京市",
        110200: "县",
        120100: "武汉市",
        120200: "县"
      },
      county_list: {
        110101: "东城区",
        110102: "西城区",
        110105: "朝阳区",
        110106: "丰台区",
        120101: "江夏区",
        120102: "新技术经济开发区",
        120103: "汉口区",
        120104: "南开区",
        120105: "河北区"
        // ....
      }
    };
    return {
      show: false,
      images: [],
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      searchResult: [],
      areaList,
      // 优惠多少钱
      DiscountMoney: "",
      AddressInformation: "",
      // 价格
      price: "",
      //商品标题
      title: "",
      M: "￥",
      showSku: false,
      sku: {
        // 数据结构见下方文档
      },
      goods: {
        // 数据结构见下方文档
      },
      messageConfig: {
        // 数据结构见下方文档
      },
      btn: false,
      goodsId: 1,
      quota: 1,
      quotaUsed: 0,
      checked:"circle"
    };
  },
  components: {
    Swipe,
    SwipeItem,
    Tag,
    CouponCell,
    CouponList,
    Popup,
    AddressEdit,
    GoodsAction,
    GoodsActionIcon,
    GoodsActionButton,
    Sku
  },
  beforeCreate: function() {
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  },
  created: function() {
    // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

    this.statr(this.$route.params.id, this.pathuiL);
  },
  beforeMount: function() {},
  methods: {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。

    statr(id, Api) {
      
      this.$store.state.arrow = true;
      this.$store.state.Title = "详情";
      this.$store.state.LeftTitle = "返回";
      let THIS = this;
      THIS.axios
        .get(Api + "allproducts/?id=" + id)
        .then(function(response) {
          // handle success

          THIS.images = response.data[0].imgs;
          THIS.price = response.data[0].price;
          THIS.title = response.data[0].title;
          coupon.valueDesc = response.data[0].Discount;
          console.log(coupon.valueDesc);
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .then(function() {
          // always executed
        });
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
      this.DiscountMoney = coupon.valueDesc;
    },
    onExchange(code) {
      console.log(code);
      this.coupons.push(coupon);
    },
    showPopup() {
      this.show = true;
    },
    onSave(content) {
      this.Toast("提交");
      this.AddressInformation = content;
      this.show = false;
    },
    onDelete() {
      this.Toast("delete");
    },
    onChangeDetail(val) {
      console.log(val);
      if (val) {
        this.searchResult = [
          {
            name: "万年台社区",
            address: "豹澥镇"
          }
        ];
      } else {
        this.searchResult = [];
      }
      console.log(this.searchResult);
    },

    CustomerService() {
      this.Toast("客服");
    },
    ShoppingCart() {
      this.Toast("购物车");
      let user = JSON.parse(localStorage.getItem("user"));
      const usersid = user.id; //识别用户
      this.ToastFunction("/cart/", usersid);
    },
    AddShoppingCart() {
      let THIS = this;
      console.log("ok");
      if (THIS.AddressInformation == "") {
        THIS.Toast("请填写完整的地址及个人信息！！！");
      } else if (THIS.AddressInformation != "") {
        // 添加到购物车；

        THIS.price -= THIS.DiscountMoney; //计算实际商品领劵后的价格
        console.log(THIS.price, THIS.AddressInformation);
        const phone = THIS.AddressInformation.tel; //电话
        const address =
          THIS.AddressInformation.province +
          "/" +
          THIS.AddressInformation.city +
          "/" +
          THIS.AddressInformation.county +
          "/" +
          THIS.AddressInformation.addressDetail; //详细地址
        let user = JSON.parse(localStorage.getItem("user"));
        const usersid = user.id; //识别用户
        const Img = THIS.images[1].img;
        THIS.axios
          .post(THIS.pathuiL+"MyShoppingCart/", {
            phone: phone,
            address: address,
            Img: Img,
            usersid: usersid,
            Money: THIS.price,
            Title: THIS.title,
            checked:THIS.checked
          })
          .then(function(response) {
            console.log(response);
            const id = usersid;
            const pathuiL = "/cart/";
            THIS.ToastFunction(pathuiL, id);
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    BuyNow() {
      // 立即购买

      const THIS = this;
      let user = JSON.parse(localStorage.getItem("user"));
      const MoneyNumber = user.MoneyNumber - THIS.DiscountMoney; //获取余额
      const usersid = user.id; //获取用户id来搜索是那个用户在买商品然后用商品价格减去该用户的余额

      if (THIS.price > MoneyNumber) {
        THIS.Toast("余额不足！！！");
      } else if (THIS.AddressInformation == "") {
        THIS.Toast("请填写完整的地址及个人信息！！！");
      } else if (THIS.price <= MoneyNumber) {
        let Money = Number(MoneyNumber) - THIS.price;
        console.log("ok", THIS.AddressInformation);

        THIS.axios
          .patch(THIS.pathuiL+"users/" + usersid, {
            MoneyNumber: Money
          })
          .then(function(response) {
            localStorage.setItem("user", JSON.stringify(response.data));
            THIS.Toast("购买成功快去物流看看吧");
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    onBuyClicked() {
      console.log("购买");
    }
  }
};
</script>

<style lang="scss" scope>
.Details_Box {
  width: 100%;
  height: 100%;
  // background-color: aliceblue;
  .van-swipe,
  .van-swipe__track {
    width: 100%;
    height: 10rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .DetailsContent {
    width: 100%;
    height: 3.8rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .DetailsTitle {
      width: 100%;
      height: 1rem;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;

      .DetailsTitleText {
        font-size: 0.3rem;
        color: #f40;
      }
    }
    .DetailsTitleName {
      padding-left: 0.3rem;
      color: green;
      font-size: 0.4rem;
      font-family: "Courier New", Courier, monospace;
      font-weight: 300;
    }
    .DetailsTitText {
      padding-left: 0.2rem;
      color: red;
      font-size: 0.3rem;
      font-weight: 100;
      font-family: "Times New Roman", Times, serif;
    }
    .success {
      padding: 0.2rem 0.5rem;
      margin-left: 1rem;
      font-size: 0.3rem;
      color: red;
      letter-spacing: 2px;
    }

    .price_box {
      margin-left: 1rem;
      display: flex;
      flex-wrap: nowrap;
      height: 0.8rem;
      line-height: 0.8rem;

      .name {
        color: green;
        font-size: 0.45rem;
        font-family: "Courier New", Courier, monospace;
        font-weight: 400;
      }
      .price {
        color: #f40;
        font-size: 0.5rem;
        font-family: "Courier New", Courier, monospace;
        font-weight: 100;
        margin: 0;
      }
    }
  }

  .van-cell--clickable {
    width: 100%;
    height: 1.2rem;
    .van-cell__title {
      text-align: start;
      color: #f40;
      letter-spacing: 2px;
    }
  }
  .address_box {
    width: 100%;
    margin-top: 2px;
  .address {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    .Title {
      font-size: 0.3rem;
      font-family: 'Courier New', Courier, monospace;
      font-weight: 300;
      letter-spacing: 2px;
      padding-left: 0.3rem;
      color: white;
    }
    .address_Icon{
      font-size: 0.6rem;
      color: skyblue;
      margin-right: 0.3rem;

    }
  }
  
  
  }
   .GoodsAction {
      width: 100%;
      height: 1.7rem;
  
      
    }
    .opacity_06 {
 
      background-color: rgba(0, 0, 0, .6);
  
    }
}
</style>